<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath }" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="${ctx }/resources/js/bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="${ctx }/resources/fonts/fontawesome/font-awesome.min.css" media="all"/>
<style>
			.ym{
			width:800;float:left;color: #333;margin-top: 10px;margin-bottom: 10px;padding-left:530px;  
			 
		}
		.ym .fy{
			float: right;
			font-size: 16px;
			padding: 0 20px;
			cursor: pointer;
		}
		.ym .fy:hover{
			color: #DE5D4D;
		}
		.ym ul{
			float: right;
			list-style: none;
			padding: 0;
			margin: 0;
		}
		.ym ul li{
			float:left;
			padding:0 5px;
			padding-top: 2px;
			font-size: 15px;
			cursor: pointer;
		}
		.ym ul li:hover{
			color: #DE5D4D;
		}　
</style>
<!--[if !IE]><!-->
<script type="text/javascript"
	src="${ctx}/resources/js/jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript"
src="${ctx}/resources/js/nicescroll/jquery.nicescroll.min.js"></script>
<link rel="stylesheet" href="${ctx }/resources/css/customer/webside-icon.min.css" />
<script language="javascript" type="text/javascript"> 
$(function(){
    //用jQuery获取table中td值
    $("table tr").click(function(){
        var ale=$(this).find(".id").text();
        var ales=$(this).find(".rd").text();
        $("#but").click(function(){
        	parent.$("#resourceId").val(ale);
            parent.$("#resourceName").val(ales);
          //先得到当前iframe层的索引
          var index = parent.layer.getFrameIndex(window.name);
          //再执行关闭
          parent.layer.close(index);
        })
    });
    
 
});
</script>
<style type="">
#sou{
padding-top:10px;
  height: 500px;
  width: 800px;

}
#mytable{
 width: 700px;
  height: 450px;
 margin-left:50px;
 
}

#mytable td{
padding-left:5px;
padding-bottom: 2px;
padding-top: 2px;
}
 
</style>

 
</head>
<body class="no-skin">
					<input type="text" style="display:none;" id="pagecount">
                    <div id="sou">
 					<input type="text" style="display:none;"  />
 					 <div style="margin-left:50px">资源名称 &nbsp;&nbsp;&nbsp;<input id="searchKey"  type="text" style="border-radius:4px;"/> &nbsp;&nbsp;&nbsp;<a onclick="searchbykey()" id="search" href="#" style="display:inline-block;text-decoration:none;border-radius:5px;width:58px;height:24px;text-align:center;border:1px solid #000">搜索</a>
				     &nbsp; &nbsp; &nbsp; &nbsp;<input type="button" value="确定" id="but"/></div>
				   <div style="height:20px"></div>
				   
				   <table   border=""   id="mytable">
					
					<tr>
					  <td>请选择</td>
				      <td>资源id</td>
				      <td>资源名称</td>
				      <td>资源地址</td>
				   </tr>
				   
				   <c:forEach var="item" items="${videoResource_list}" >
				    <tr>
				     <td>&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="rad"  id="radio"/></td>
				      <td class="id">${item.id}</td>
				      <td class="rd" >${item.name}</td>
				      <td class="fd">${item.url}</td>
				   </tr>
				    </c:forEach>
					</table>
					 
				    	<div class="ym" style="display:none"><div class="fy" onclick="xy()">下一页</div><ul id="ymcount"></ul><div class="fy" onclick="sy()">上一页</div></div>

					<input type="text" style="display:none" id="rscount1" value='${totalPageCount }'>
					 </div>
							
	<script type="text/javascript">
			showpage();
		function sy(){
			var count=$("#pagecount").val();
			   if(count>1){
				var key =$("#searchKey").val().trim();
				search(key,count-1,15);
				$("#pagecount").val(count-1);
			}   
			
		}	
		
		function xy(){
			var count=$("#pagecount").val().trim();
			var total=$("#rscount1").val();
			var total1=$("#rscount").val();

			if(total!=undefined && count!=total){
				var key =$("#searchKey").val().trim();
				$("#pagecount").val(parseInt(count)+1);
				search(key,parseInt(count)+1,15);
		}else if(total1!=undefined && count!=total1){
			
			var key =$("#searchKey").val().trim();
			$("#pagecount").val(parseInt(count)+1);
			search(key,parseInt(count)+1,15);
			}
		}
		function showpage(){
			var count=$("#rscount1").val();
			if($("#pagecount").val().trim()=="" ||  $("#pagecount").val().trim()==undefined){
				$("#pagecount").val("1");
			}
			if(count==0){
				$(".ym").hide();
			}else{
				$(".ym").show();
				$("#ymcount").html("");
				for(var i=1;i<count-1+2;i++){
					$("#ymcount").append("<li class='addColor' onclick='ym(this)'>"+i+"</li>");
				}
				var $cgcolor=$(".addColor").eq(0);
				 $cgcolor.css("color","red");
			}
			
		}
		function searchbykey(){
			var key =$("#searchKey").val().trim();
			search(key,1,15);
			if(key!=""){
				search(key,$this.text(),15);
			}
		}
		function ym(obj){
			var $this=$(obj);
			var key =$("#searchKey").val().trim();
			$("#pagecount").val($this.text());
			
			search(key,$this.text(),15);
		}
		function search(key,no,size){
		
			var params = {};
			params["pageNo"] = no;
			params["pSize"] = 15;
			params["sort"] = key;
			
			$.ajax({
				type:"post",
				url:"${pageContext.request.contextPath }/bvideo/searchPage.html",
				data:params,
				success:function(data){
					$("#sou").html(data);
					var count=$("#rscount").val();
					if(count==0){
						$(".ym").hide();
					}else{
						$("#sou").append("<div class='ym'><div class='fy' onclick='xy()'>下一页</div><ul id='ymcount'></ul><div class='fy' onclick='sy()'>上一页</div></div>");	
						for(var i=1;i<parseInt(count)+1;i++){
							$("#ymcount").append("<li class='addColor' onclick='ym(this)'>"+i+"</li>");
						}
						var $cgcolor=$(".addColor").eq(parseInt(no)-1);
						 $cgcolor.css("color","red");
					}
				}
			});
		}
		$(document).keydown(function(event){ 
			if(event.keyCode==13){
				searchbykey();
			} 
		});
		
	</script>
</body>
</html>